<template>
    <el-container style="height: 100%;">
        <el-header style="height: auto;">
            <el-form :inline="true" :model="serachForm" class="search-form-inline" size="size" @submit.native.prevent>
                <el-form-item label="创建时间:">
                    <vdatepicker @update-date="updatedate" :def="false" />
                </el-form-item>
                <el-form-item label-width="0">
                    <el-input v-model.trim="serachForm.resourceName" placeholder="请输入资源名称" @keyup.enter.native="loadData" v-filterSpecialChar></el-input>
                </el-form-item>
                <el-form-item size="size">
                    <el-button type="primary" native-type="submit" @click="()=>{
                        pageNo = 1;
                        loadData();
                    }">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-header>
            <el-container class="table-con">
                <el-header style="height: auto;">
                   <div class="head--add-title">
                    <div class="span">共有<span class="num">{{ total }}</span>个资源</div>
                    <el-button type="primary" class="addbtn" @click="handleCreate">新建</el-button>
                </div>
                </el-header>
                <el-main class="main-add-table">
                    <el-table
                            ref="singleTable"
                            v-loading="loading"
                            :data="tableData"
                            border
                            size="small"
                            tooltip-effect="light"
                            class="custom-table"
                            :header-row-class-name="'custom-head-row'"
                            :header-cell-class-name="'custom-head-column'"
                            :row-class-name="'custom-row'"
                            :cell-class-name="'custom-cell'"
                            empty-text=" "
                            :max-height="tableHeight"
                            style="width: 100%"
                    >
                        <el-table-column type="index" align="center" label="序号" width="60">
                            <template slot-scope="scope">
                                {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="resourceName"
                                label="资源名称"
                                 min-width="140"
                                 align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.resourceName">{{scope.row.resourceName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="ip"
                                label="IP"
                                 min-width="140"
                                align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.ip||'-'">{{scope.row.ip||'-'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="port"
                                label="端口"
                                 min-width="60"
                                align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.port||'-'">{{scope.row.port||'-'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="typeId"
                                label="协议类型"
                                 min-width="80"
                                align="center">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.typeId|DictionaryCodeToName('filetype')">{{scope.row.typeId|DictionaryCodeToName('filetype')}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="用户名"
                                 min-width="140"
                                align="center">
                        </el-table-column>
                        <el-table-column
                         min-width="120"
                                label="是否关联任务" align="center">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top" v-if="scope.row.fileTaskVoList&&scope.row.fileTaskVoList.length!=0">
                                    <el-table
                                            :data="scope.row.fileTaskVoList"
                                            border
                                            :resizable="false"
                                            size="small"
                                            style="width:252px"
                                            :max-height="280"
                                    >
                                        <el-table-column
                                                prop="name"
                                                label="任务名称"
                                                width="150"
                                                 align="center"
                                                :resizable="false">
                                            <template slot-scope="scope">
                                                <span class="ellipsis"  :title="scope.row.fileTaskName||'-'">{{scope.row.fileTaskName||'-'}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="status"
                                                label="状态"
                                                 align="center"
                                                width="100"
                                                :resizable="false">
                                            <template slot-scope="status">
                                                {{status.row.fileTaskStatus|DictionaryCodeToName('taskStatus')}}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">是</el-tag>
                                    </div>
                                </el-popover>
                                <span  v-else>否</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createDate" align="center"  label="创建时间" width="160">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.createDate">{{scope.row.createDate || "-"}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="updateDate"  align="center" label="修改时间" width="160">
                            <template slot-scope="scope">
                                <span class="ellipsis" :title="scope.row.updateDate">{{scope.row.updateDate || "-"}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column class="table-operate"  align="center" label="操作" min-width="190" fixed="right">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-button
                                            type="text"
                                            size="small"
                                            @click="testConnection(scope.row)"
                                            :loading="scope.row.testconn"
                                    >测试连接
                                    </el-button>
                                    <span class="vertical">|</span>
                                    <el-button
                                            type="text"
                                            size="small"
                                            @click="detail(scope.row)"
                                    >详情
                                    </el-button>
                                    <span class="vertical">|</span>
                                    <el-button
                                            type="text"
                                            size="small"
                                            @click="modify(scope.row)"
                                    >修改
                                    </el-button>
                                    <span class="vertical">|</span>
                                    <el-button
                                            type="text"
                                            size="small"
                                            @click="del(scope.row)"
                                    >删除
                                    </el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <CustomPage
                                :currentPage="pageNo"
                                :pageSize="pageSize"
                                :total="total"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                        />
                    </div>
                </el-main>
            </el-container>

    </el-container>
</template>
<script>

import CustomPage from '@/common/CustomPage'
import vdatepicker from '@/common/CuDatepicker';
export default {
  name: 'FTPResource',
  components: {
    CustomPage, vdatepicker
  },
  data() {
    return {
      tableHeight: null,
      serachForm: {
        resourceName: '',
        createTimeStart: '',
        createTimeEnd: ''
      },
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  watch: {
    tableData: {
      handler(newval) {
        if (newval) {
          for (let i = 0; i < newval.length; i++) {
            newval[i]['testconn'] = false;
          }
        }
      },
    }
  },

  methods: {
    updatedate(v) {
      this.serachForm.createTimeStart = v[0];
      this.serachForm.createTimeEnd = v[1];
    },
    // 获取列表数据
    loadData() {
      this.loading = true
      this.$api.resourcemanage.fileList.call(this, {
        ...this.serachForm,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(res => {
        const result = res.data;
        if (result.code === 200) {
          let data = result.data;
          this.total = data.total;
          this.tableData = data.list;
        } else {
          this.total = 0;
          this.tableData = [];
        }
        this.loading = false
      }).catch(() => {
        this.total = 0;
        this.tableData = [];
        this.loading = false
      })
    },
    // 新建按钮触发事件
    handleCreate() {
      this.$emit('changeComponent', {
        active: 'ftpconfig',
        type: 'add'
      })
    },
    // 测试连接
    testConnection(row) {
      row.testconn = true;
      this.$api.resourcemanage.testConnection.call(this, row).then(result => {
        if (result.data.code === 200) {
          this.$message({
            message: result.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: result.data.msg,
            type: 'error'
          });
        }
        row.testconn = false
      }).catch(() => {
        row.testconn = false
      })
    },
    detail(row) {
      this.$emit('changeComponent', {
        active: 'ftpdetail',
        resourceId: row.resourceId
      })
    },
    // 修改
    modify(row) {

      let valid = true;
      row.fileTaskVoList&&row.fileTaskVoList.forEach((d) => {
        if (d.fileTaskStatus != 0) {
          valid = false;
        }
      });
      if (valid) {
        this.$emit('changeComponent', {
          active: 'ftpconfig',
          type: 'modify',
          resourceId: row.resourceId
        })
      } else {
        this.$message({
          message: '已关联任务正在运行，请暂停任务！',
          type: 'error'
        });
      }


    },
    del(row) {
      if (row.fileTaskVoList.length === 0) {
        this.$confirm(
          '是否确定删除？',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.$api.resourcemanage.delete.call(this, row.resourceId).then(result => {
              if (result.data.code === 200) {
                this.$message({
                  message: result.data.msg,
                  type: 'success'
                });
              } else {
                this.$message({
                  message: result.data.msg,
                  type: 'error'
                });
              }
              this.loadData();
            }).catch(() => {
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
              center: true
            });
          });
      } else {
        this.$message({
          message: '此资源已关联任务，取消已关联的任务方可删除！',
          type: 'error'
        });
      }

    },
    // 翻页
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadData();
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.pageNo = currentPage;
      this.loadData();
    },
    layout() {
      this.$nextTick(() => {
       // this.tableHeight = this.$refs['singleTable'].$el.clientHeight;
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs['singleTable'].$el.clientHeight;
      this.loadData();
    })
  }
}
</script>
<style lang="less" scoped>
    .vertical {
        color: #bababa;
        padding: 0 5px;
    }
    .span {
      float: left;
      margin-top: 6px;
    }
    .addbtn {
      float: right;
    }
</style>
